<template>
<div class="dashboard-container">
    <div class="app-container">
      <!-- 整体卡片 -->
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form label-width="80px" :model="keyForm">
          <!-- row 布局 -->
          <el-row :gutter="20">
            <!-- 左侧搜索框 -->
            <el-col :span="6">
              <el-form-item label="关键字" prop="kewWord">
                <el-input placeholder="根据编号搜索" v-model="keyForm.keyWord"></el-input>
              </el-form-item>
            </el-col>
            <!-- 右侧按钮 -->
            <el-col :span="4" :offset="14">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-col>
          </el-row>
          <!-- 提示数据条数 -->
          <el-alert
            show-icon
            v-if="alertNum !== 0"
            :title="`数据一共${ alertNum }条`"
            :closable="false"
            class="alert-num"
          ></el-alert>
        </el-form>
        <!-- 表格 -->
        <quseTable
          :randomsList="randomsList"
          :pagingQuery="pagingQuery"
          @getRandomsList="getRandomsList"
          @update="updatePage"
        ></quseTable>
        <!-- 分页 -->
        <div>
          <PageTool
          :paginationPage="Number(pagingQuery.page)"
          :paginationPagesize="Number(pagingQuery.pagesize)"
          :total="alertNum"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
           class="page-tool"
          ></PageTool>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import quseTable from './companys/questions-table.vue'
import { randoms } from '@/api/hmmm/questions'
import PageTool from '@/module-manage/components/page-tool'
export default {
  components: {
    PageTool,
    quseTable
  },
  data () {
    return {
      searchList: [],
      keyForm: { // 表单
        keyWord: ''
      },
      pagingQuery: {
        pagesize: 20, // 一页多少数据
        page: 1 // 页数
      },
      alertNum: '', // 提示栏数据 / 总数
      randomsList: [{
        id: '', // 编号
        questionType: '', // 题型
        questionIDs: [{
          number: ''
        }], // 题目编号 需要里面的number
        addTime: '', // 录入时间
        totalSeconds: '', // 答题时间
        accuracyRate: '', // 正确率
        userName: '' // 录入人
      }]
    }
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 最后一条数据修改页数
    updatePage () {
      this.pagingQuery.page--
      this.getRandomsList()
    },
    // 搜索
    search () {
      // 判断
      // if (this.keyForm.keyWord === '') return
      // 调用获取...
      this.getRandomsList()
      this.clear()
    },
    // 清除搜索框内容
    clear () {
      this.keyForm.keyWord = ''
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagingQuery.page = 1
      this.pagingQuery.pagesize = val
      this.getRandomsList()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagingQuery.page = val
      this.getRandomsList()
    },
    // 获取组题列表等数据
    async getRandomsList () {
      const res = await randoms({
        page: this.pagingQuery.page,
        pagesize: this.pagingQuery.pagesize,
        keyword: this.keyForm.keyWord
      })
      // console.log(res)
      this.alertNum = res.data.counts
      this.randomsList = res.data.items
      this.pagingQuery.pagesize = res.data.pagesize
      this.pagingQuery.page = res.data.page
    }
  }
}
</script>

<style scoped lang="scss">
.alert-num{
  margin-bottom: 15px;
}
.page-tool{
  margin-top: 20px;
}

</style>
